<template>
	<div class="uPop fixed-all flex-all" v-if="isPop" @click="changePop">
		<div :class="['popContent',className]" @click.stop="">
			<div class="popTitle flex align-items-center">
				<div class="flex align-items-center flex-grow-base">
					<img :src="icon" alt="">
					<span>{{title}}</span>
				</div>
				<div class="popClose flex-all" @click="changePop">×</div>
			</div>
			<div class="uPopMain box-sizing-base">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['title','icon','isPop',"className"],
		methods: {
			changePop() {
				var isPop = !this.isPop;
				this.$emit('update:isPop',isPop)
			}
		}
	}
</script>

<style lang="less" scoped>
  @import "../../assets/css/reset.css";
  @import "../../assets/css/style.css";
	.uPop {
		background-color: rgba(153,153,153,.4);
		z-index: 100;
		.popContent {
			width: 20rem;
			background-color: #fff;
			&.small {
				width: 10rem;
			}
			.popTitle {
				padding: .48rem;
				border-bottom: 2px solid #EEEEEE;
				// font-size: 20px;
				font-size: .32rem;
				font-weight: bold;
				color: #666;
				span {
					margin-left: 10px;
				}
				.popClose {
					font-weight: normal;
					font-size: .32rem;
					width: .34rem;
					height: .34rem;
					background-color: #999999;
					border-radius: 50%;
					color: #fff;
					cursor: pointer;
				}
			}
		}
		.uPopMain {
			padding: .4rem .6rem;
			overflow: auto;
		}
	}
</style>
